<template>
	<!-- 组件化页面 -->
	<view class="yp">
		<app-headers></app-headers>
		<!-- H5遮罩层 -->
		<view class="H5-Mask" @touchmove.stop.prevent="H5_Mask_Move" v-if="H5_Mask"></view>
		<view class="applicBar" @click="onShow_H5Mask">
			<text>H5版遮罩层</text>
			<text class="cuIcon-right"></text>
		</view>
		<!-- DropDownPopup -->
		<DropDownPopup :isShow_H5_Mask.sync='isShow_DropDown' :isMask=true>
			<h1 slot="header">Here might be a page title</h1>
			<view slot="content">Here might be a page title</view>
		</DropDownPopup>
		<view class="applicBar" @click="onShow_DropDownPopup">
			<text>下拉Popup</text>
			<text class="cuIcon-right"></text>
		</view>
		
		<view class="applicBar" @click="$pub.naviTo('/pages/public/map/map')">
			<text>地图定位取经纬度</text>
			<text class="cuIcon-right"></text>
		</view>
		
		<view class="applicBar" @click="$pub.naviTo('/pages/public/QRcode/index')">
			<text>QRcode的使用</text>
			<text class="cuIcon-right"></text>
		</view>
		
		<view class="applicBar" @click="$pub.naviTo('/pages/public/pullRefresh/index')">
			<text>封装自定义下拉刷新</text>
			<text class="cuIcon-right"></text>
		</view>
	</view>
</template>

<script>
import DropDownPopup from './DropDownPopup.vue'
export default {
	name: '',
	components:{
		DropDownPopup
	},
	data(){
		return{
			H5_Mask:false ,//遮罩层是否显示
			isShow_DropDown: false, // DropDownPopup是否显示
		}
	},
	methods: {
		onShow_H5Mask() {
			this.H5_Mask = true
			setTimeout(()=>{this.H5_Mask=false},3000)
		},
		onShow_DropDownPopup(){
			this.isShow_DropDown = true
		},
		H5_Mask_Move(){
			return
		}
	}
};
</script>

<style scoped>
.applicBar {
	background-color: #fff;
	padding: 15px;
	display: flex;
	box-sizing: border-box;
	width: 100%;
	justify-content: space-between;
	cursor: pointer;
}

.H5-Mask {
	position: fixed;
	width: 100%;
	height: 100vh;
	top: 0;
	left: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.2);
	z-index: 99999;
}
</style>
